<template>
  <div>
    <div class="theme-father">
      <div class="w theme">
        <div class="theme-l">
          <router-link to="/homeView" tag="div" class="img">
            <img src="../assets/img/logo.png" height="50px" alt="" />
          </router-link>
          <div class="txt">登录</div>
        </div>
        <div class="theme-r">
          <p>还没有小度商城账号？</p>
          <p>
            <router-link to="/registerView" tag="a"> 注册 </router-link>
          </p>
        </div>
      </div>
    </div>
    <div class="sign-in">
      <div class="sign-son w">
        <div class="sign-l">
          <img src="../assets/img/dl.png" width="510" alt="" />
        </div>
        <div class="sign-r">
          <div class="account">
            <div class="title">
              <div class="pic">
                <img src="../assets/img/loginlogo.gif" alt="" />
              </div>
              <p>用户名密码登录</p>
            </div>
            <div class="username">
              <input
                type="text"
                placeholder="手机号/用户名/邮箱"
                v-model="username"
              />
            </div>
            <div class="password">
              <input type="password" placeholder="密码" v-model="prosswork" />
            </div>
            <div class="btns">
              <input type="submit" @click="signIn" value="登录" />
            </div>
            <div class="forget">
              <a href="#">忘记密码？</a>
              <a href="#">短信快捷登录</a>
            </div>
          </div>
          <div class="other">
            <div class="sweep">
              <div class="sweep-son">
                <a href="#">扫码登录</a>
              </div>
              <div class="qww">
                <ul>
                  <li>
                    <a href="#" class="iconfont icon-QQ"></a>
                  </li>
                  <li>
                    <a href="#" class="iconfont icon-weibo"></a>
                  </li>
                  <li>
                    <a href="#" class="iconfont icon-weixin"></a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="register">
              <a href="#">立刻注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div class="icp">
        <div class="fuwu">
          <a href="#">在线客服</a>
          <a href="#">帮助中心</a>
          <a href="#">用户协议</a>
          <a href="#">关于小度</a>
        </div>
        <p>©2022 Baidu 京ICP证030173 京公网安备11000002000001号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userLists: [],
      username: "",
      prosswork: "",
      my: [],
    };
  },
  methods: {
    signIn() {
      if (localStorage.userLists) {
        for (var i = 0; i < this.userLists.length; i++) {
          if (
            (this.username == this.userLists[i].username ||
              this.username == this.userLists[i].telephone) &&
            this.prosswork == this.userLists[i].password
          ) {
            this.$message({
              message: "登录成功，欢迎回到小度",
              type: "success",
            });
            this.my.push({
              myusername: this.username,
              mypassword: this.prosswork,
            });
            window.sessionStorage.setItem("token", JSON.stringify(this.my));
            this.$router.push("/homeView");
          } else {
            this.$message.error("账号或密码错误");
          }
        }
      } else {
        this.$message.error("您还没有小度账号，快去注册一个吧");
      }
    },
  },
  created() {
    this.userLists = JSON.parse(window.localStorage.getItem("userLists"));
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/signin.scss";
</style>